<template>
  <div class="orderConfirm">
    <div class="container">
      <div class="title">
        <p>确认订单</p>
      </div>
      <div class="address">
        <p class="address-title">选择收获地址</p>
        <ul class="address-con">
          <li @click="addAddress">+新增收货地址</li>
          <li
            v-for="item in address"
            ref="address"
            @click="checkAddress($event, item.id)"
            :class="isActive == item.id ? 'addressActive' : ''"
          >
            {{ item.area_name }}
          </li>
        </ul>
      </div>
      <div class="detail">
        <OrderItem
          v-for="item in goods"
          :good="item"
          :key="item.id"
        ></OrderItem>
      </div>
      <div class="footer">
        <button @click="refer" class="primary-button">去付款</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getAddress, referOrder, delCart } from "@/assets/request.js";
import OrderItem from "@/components/OrderItem.vue";
export default {
  name: "OrderPay",
  data() {
    return {
      goods: [],
      address: [],
      goodInfoArray: [],
      goodIdArray: [],
      isActive: -1,
      checkedArrayRightNow: [],
    };
  },
  methods: {
    changeIsActive(id) {
      this.isActive = id;
    },
    goOrderList() {
      this.$router.push({ name: "orderlist" });
    },
    addAddress() {
      this.$router.push({ name: "address" });
    },
    checkAddress(e, id) {
      const addressArray = this.$refs.address;
      addressArray.forEach((item) => item.classList.remove("current"));
      e.target.classList.add("current");
      this.changeIsActive(id);
    },
    async getAddressArray() {
      const resGetAddress = await getAddress();
      this.address = resGetAddress.data.result;
    },

    getGoods() {
      this.checkedArrayRightNow = JSON.parse(
        sessionStorage.getItem("checkedArrayRightNow")
      );
      this.goods =
        this.checkedArrayRightNow ||
        JSON.parse(sessionStorage.getItem("checkedArray"));
      if (this.goods) {
        this.goods.forEach((item) => {
          this.goodInfoArray.push({ id: item.s_good.id, num: item.num });
          this.goodIdArray.push(item.s_good.id);
        });
      }
    },

    async delCartSingle(id) {
      const resDelCart = await delCart(
        {
          project_id: 259,
        },
        id
      );
    },
    clearCart() {
      this.goods.forEach((item) => this.delCartSingle(item.id));
    },
    async refer() {
      const resReferOrder = await referOrder({
        addr_id: 1871,
        goods_info: this.goodInfoArray,
        project_id: 259,
        shoppingCartIds: this.goodIdArray,
      });
      this.goOrderList();
      this.clearCart();
    },
  },
  components: {
    OrderItem,
  },
  created() {
    this.getGoods();
  },
  mounted() {
    // this.getGoods();
    this.getAddressArray();
  },
  destroyed() {
    sessionStorage.removeItem("checkedArray");
    sessionStorage.removeItem("checkedArrayRightNow");
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/style/coverBtn.scss";
.orderConfirm {
  .container {
    width: 1200px;
    margin: 0 auto;
    .addressActive {
      box-shadow: 0 5px 10px lightgray;
    }
    .title {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 50px;
      font-size: 20px;
    }
    .address {
      .address-title {
        height: 50px;
        padding-left: 20px;
        background-color: #2f333a;
        line-height: 50px;
        font-size: 16px;
        color: white;
      }
      .address-con {
        display: flex;
        margin: 20px 0;
        li {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          width: 300px;
          margin: 30px;

          font-size: 12px;
          letter-spacing: 2px;
        }
        li:hover {
          box-shadow: 0 5px 10px lightgray;
        }
      }
    }
    .footer {
      display: flex;
      justify-content: end;
      margin: 30px 0;
      button {
        width: 200px;
      }
    }
  }
  .current {
    border: 1px solid black;
  }
}
</style>
